<template>
    <div class="body">
        <div class="head header">
            <div class="pos">
                <span><a href="/index" class="iconfont icon-fanhui"></a></span>
            </div>
            <div class="a1">
                <h2>注册</h2>
                <p>第三方注册</p>
                <div class="house">
                    <span class="pic"><a class="iconfont icon-web-icon-"></a></span>
                    <span class="pic"><a class="iconfont icon-gongzhonghao"></a></span>
                    <span class="pic"><a class="iconfont icon-weibo00"></a></span>
                    <span class="pic"><a class="iconfont icon-changyonglogo25"></a></span>
                </div>
                <p class="house_p">或者使用您的电子邮箱进行注册</p>
                <form action="" class="zd">
                    <div class="rela">
                        <input type="text" name="txt" placeholder="请输入用户名" id="user" @keyup="users()">
                        <span id="userts"></span>
                    </div>
                    <div class="rela">
                        <input type="email" name="email" placeholder="邮箱" required="required" id="emails" @keyup="email()">
                        <span id="emailts"></span>
                    </div>
                    <div  class="rela">
                        <input type="password" name="pwd" pattern="\d{6}" placeholder="密码" id="pwd" maxlength="6" @keyup="password()">
                        <span id="pwdts"></span>
                    </div>
                    <div>
                        <input type="button" name="sub" value="注册" @click="res()">
                    </div> 
                </form>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "register",
        data(){
            return {
                flag1:false,flag2:false,flag3:false,
                username:'',
                emails:'',
                pwd:''
            }
        },
        methods:{
            users(){
                var reg=/^[\u4e00-\u9fa5]{2,6}$/;
                if($("#user").val()===""){
                    $("#userts").html("——用户名不能为空");
                }else if(!reg.test($("#user").val())){
                    $("#userts").html("——格式错误，只能是汉字");
                }else {
                     $("#userts").html("");
                     this.flag1=true;
                     this.username=$("#user").val()
                }
            },
            email(){
                var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/ig;
                console.log($("#emails").val());
                if ($("#emails").val()==="") {
                    $('#emailts').html("邮箱不能为空");
                }else if (!reg.test($("#emails").val())) {
                    $('#emailts').html("格式错误，请输入正确邮箱");
                }else {
                    $('#emailts').html("");
                    this.flag2 = true;
                    this.emails=$("#emails").val();
                }
            },
            password(){
                var reg = /^[\w]{6}$/ig;
                if($("#pwd").val()===""){
                    $("#pwdts").html("密码不能为空");
                }else if(!reg.test($("#pwd").val())){
                     $("#pwdts").html("格式错误");
                }else{
                    $("#pwdts").html("");
                    this.flag3 = true;
                    this.pwd=$("#pwd").val()
                }
            },
            res(){
                console.log(this.flag1);
                console.log(this.flag2);
                console.log(this.flag3);
                if(this.flag1==true && this.flag2==true && this.flag3==true){
                    this.$axios.post("http://localhost:3000/register","name="+String(this.username)+"&password="+String(this.pwd)+"&email="+String(this.emails)).then((data)=>{
                        console.log(data);
                        if(data.data.code==200){
                            alert(data.data.msg);
                            this.$router.replace({path:'/login'});
                        }else if(data.data.code==400){
                            alert(data.data.msg);
                        }else if(data.data.code==404){
                            alert(data.data.msg);
                        }
                    })
                }else{
                    alert("请按要求填写信息");
                }
            }
        }
    }
</script>

<style scoped lang="less">
    .header{height: 40rem}
    a{text-decoration: none;color: #7e6060}
    a:hover{color: #fff;}
    .zd a:hover{color: #ee9ca7;background-color: #fff;border:1px solid #ee9ca7;text-decoration: none;}
    .zd input{margin-bottom: 1.8rem;
        padding: 0.8rem 3.5rem 0.8rem 0.8rem;
        color: #ee9ca7;
        border: none;
        border: 1px solid;
        border-radius: 10px;
        outline: none;}
    .zd input:focus{
        box-shadow: 0 0 0 0.2rem rgba(238,156,167,.25);
        color: #ee9ca7;
    }
    .zd input:last-child{background-color: #ee9ca7;color: white;border-radius: 20px;padding-left: 3.5rem;width: 100%;}
    .zd input:last-child:hover{font-weight: bold;background-color: #fff;color: #ee9ca7;}
    .house_p{margin-bottom: 1.7rem;}
    .rela{position: relative;}
    .rela span{position: absolute;top: -1.2rem;left: 2rem;color: #e38ad1;}
</style>